<template>
	<view>
        <scroll-view scroll-y class="page">
			<image src="http://pi7x77.natappfree.cc/images/plan/1.jpg" mode="scaleToFill" class="response"></image>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in listData" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" :style="[{backgroundImage:'url(http://pi7x77.natappfree.cc/images/plan/1.jpg)'}]"></view>
					<view class="content">
						<view class="text-grey">{{ item.title}}</view>
						<view class="text-gray text-sm">
							<view class="text-cut"> {{ item.content }}</view></view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{ item.date }}</view>
						<view class="cu-tag round bg-grey sm">{{ item.state==0?'未完成':'已完成' }}</view>
		
					</view>
					<view class="move">
						<view class="bg-grey">置顶</view>
						<view class="bg-blue">修改</view>
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
var _this;
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
var dateUtils = require('../../common/util.js').dateUtils;
import {
		getPlan
	} from '../../service/api/plan.js' //日志api

export default {
	name:'plan',
	components: {
		uniLoadMore
	},
	data() {
		return {
			banner: {},
			listData: [],
			last_id: '',
			reload: false,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
			listTouchStart: 0,
			listTouchDirection: null,
			modalName: null,
		};
	},
	created(){
		_this = this
		this.getList();
	},
	//子组件中onload 方法可能不好使
	onLoad() {
		_this = this
		this.getList();
	},
	onPullDownRefresh() {
		this.reload = true;
		this.last_id = '';
		this.getBanner();
		this.getList();
	},
	onReachBottom() {
		this.status = 'more';
		this.getList();
	},
	methods: {
		getList() {
			console.log("获取用户计划列表") 
			getPlan()
			.then(res => {
				console.log(res) 
				//简单验证下登录（不安全）
				if(res.data.code==0){
					_this.listData=res.data.data
				}else{
					_this.isRotate=false
					_this.passData=""
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '账号或密码错误'
					});
				}
				uni.hideLoading();
			}).catch(err => {
				console.log(err)
				let msg = err.errMsg; //错误信息
				uni.showToast({
				    icon: 'none',
					position: 'center',
				    title: '网络开小差了，小主稍后再试哦^.^'
				});
				_this.isRotate=false
				uni.hideLoading();
			})
		},
		goDetail: function(e) {
			// 				if (!/前|刚刚/.test(e.published_at)) {
			// 					e.published_at = dateUtils.format(e.published_at);
			// 				}
			let detail = {
				author_name: e.author_name,
				cover: e.cover,
				id: e.id,
				post_id: e.post_id,
				published_at: e.published_at,
				title: e.title
			};
			uni.navigateTo({
				url: '../list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
			});
		},
		setTime: function(items) {
			var newItems = [];
			items.forEach(e => {
				newItems.push({
					author_name: e.author_name,
					cover: e.cover,
					id: e.id,
					post_id: e.post_id,
					published_at: dateUtils.format(e.published_at),
					title: e.title
				});
			});
			return newItems;
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX
		},
	
		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
		},
	
		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target
			} else {
				this.modalName = null
			}
			this.listTouchDirection = null
		}
	}
};
</script>

<style>
.banner {
	height: 360upx;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

.banner-img {
	width: 100%;
}

.banner-title {
	max-height: 84upx;
	overflow: hidden;
	position: absolute;
	left: 30upx;
	bottom: 30upx;
	width: 90%;
	font-size: 32upx;
	font-weight: 400;
	line-height: 42upx;
	color: white;
	z-index: 11;
}

.uni-media-list-logo {
	width: 180upx;
	height: 140upx;
}

.uni-media-list-body {
	height: auto;
	justify-content: space-around;
}

.uni-media-list-text-top {
	height: 74upx;
	font-size: 28upx;
	overflow: hidden;
}

.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
